<template>
  <view class="paipan-content">
    <view class="paipan-section">
      <view
        class="type-item"
        v-for="(item, index) in items"
        :key="index"
        :class="index == current ? 'active' : ''"
        @click="onClickItem(index)"
        >{{ item }}</view
      >
    </view>
    <view class="paipan-item">
      <view v-if="current === 0">
        <bazi></bazi>
      </view>
      <!-- <view v-if="current === 1">
        <liuyao></liuyao>
      </view> -->
      <view v-if="current === 2">
        <meihua></meihua>
      </view>
      <view v-if="current === 3">
        <qimen></qimen>
      </view>
      <view v-if="current === 4">
        <ziwei></ziwei>
      </view>
      <view v-if="current === 1">
        <xingming></xingming>
      </view>
      <view v-if="current === 6">
        <jiulong></jiulong>
      </view>
      <view v-if="current === 7">
        <yinpan></yinpan>
      </view>
      <view v-if="current === 8">
        <shenshu></shenshu>
      </view>
      <view v-if="current === 9">
        <shanxiang></shanxiang>
      </view>
      <view v-if="current === 10">
        <xuankongfeixing></xuankongfeixing>
      </view>
      <view v-if="current === 11">
        <daliuren></daliuren>
      </view>
    </view>
    <activity-banner></activity-banner>
    <activity-pop></activity-pop>
  </view>
</template>

<script>
import bazi from "@/pages/bazi/bazi.vue";
import liuyao from "@/pages/liuyao/liuyaopaipan.vue";
import meihua from "@/pages/meihua/meihua.vue";
import qimen from "@/pages/qimen/index.vue";
import ziwei from "@/pages/ziwei/ziwei.vue";
import xingming from "@/pages/xingming/xingming.vue";
import jiulong from "@/pages/jiulong/bazi.vue";
import yinpan from "@/pages/yinpan/yinpan.vue";
import shenshu from "@/pages/minglishenshu/minglishenshu.vue";
import shanxiang from "@/pages/shanxiang/shanxiang.vue";
import xuankongfeixing from "@/pages/xuankongfeixing/xuankongfeixing.vue";
import daliuren from "@/pages/daliuren/index.vue";
export default {
  components: {
    bazi,
    liuyao,
    meihua,
    qimen,
    ziwei,
    xingming,
    jiulong,
    yinpan,
    shenshu,
    shanxiang,
    xuankongfeixing,
    daliuren,
  },
  data() {
    return {
      items: [
        "八字排盘",
        // "六爻起卦",
        // "梅花易数",
        // "奇门遁甲",
        // "紫微斗数",
        "姓名排盘",
        // "九龙排盘",
        // "阴盘奇门",
        // "命理神数",
        // "山向奇门",
        // "玄空飞星",
        // "大六壬",
      ],
      current: 0,
      colorIndex: 0,
      activeColor: "#fff",
      styleType: "text",
    };
  },
  mounted() {
    let query = this.$route.query;
    let { type } = query;
    if (type) {
      this.current = parseInt(type);
    }
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.paipan-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  position: relative;
  background: url("../../static/images/bgc.jpeg") no-repeat 100% 100%;
  background-position: 50% 0%;
}
.paipan-section {
  width: 100%;
  max-width: 750px;
  box-sizing: border-box;
  position: fixed;
  // background-color: #c6a680;
  z-index: 999;
  padding: 100rpx 30rpx 20rpx;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  // flex-wrap: wrap;
  .type-item {
    width: 220rpx;
    text-align: center;
    padding: 10rpx 0 10rpx;
    box-sizing: border-box;
    background: #f2f3f5;

    margin-right: 30rpx;
  }
}
.active {
  background: #fff;
  border: 2px solid #1e1e1e;
}
.paipan-item {
  padding-top: 150rpx;
  padding-bottom: 100rpx;
}
</style>
